// 单行文字超出省略
@mixin text-ellipsis () {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
// 多行文字溢出
@mixin text-wrap () {
  word-break: break-all;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
// 宽高
@mixin setWH($width, $height) {
  width: $width;
  height: $height;
}

// 字体大小，颜色
@mixin setFontColor($size, $color) {
  font-size: $size;
  color: $color;
}

//translate中间居中
//设置子元素
@mixin translateCenter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// flex方式中间居中
// 设置父元素
@mixin flexCenter ($direction: row) {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: $direction;
}

// 定位居中
// 父元素设置position:relative;
@mixin positionCenter () {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

// 定位全屏
@mixin setAllcover($num, $location: fixed) {
  position: $location;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $num;
}

// 清除浮动
@mixin clearfix {
  &:after {
    content: '.';
    display: block;
    height: 0;
    clear: both;
  }
}
// 设置flex的排列方式
@mixin flexType ($type) {
  display: flex;
  justify-content: $type;
  align-items: center; 
}

// 1px边框线
@mixin setBorderLine ($color, $radius: 0) {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  border: 1px solid $color;
  @media (-webkit-min-device-pixel-ratio: 1.5) {
    width: 150%;
    height: 150%;
    transform: scale(.66666);
    border-radius: $radius * 1.5
  }
  @media (-webkit-min-device-pixel-ratio: 2) {
    width: 200%;
    height: 200%;
    transform: scale(.5);
    border-radius: $radius * 2
  }
  @media (-webkit-min-device-pixel-ratio: 3) {
    width: 300%;
    height: 300%;
    transform: scale(.33333);
    border-radius: $radius * 3
  }
}